<template>
  <!--  编辑对话框  -->
  <div class="editor">
    <el-dialog title="申请&编辑直播间" :visible.sync="isEditor" width="40%" :before-close="cancel">
      <el-form ref="formValidate" :model="editorForm" :rules="ruleValidate" label-width="150px">
        <el-form-item label="标题" prop="title">
            <el-input
              v-model.trim="editorForm.title"
              placeholder="请输入">
            </el-input>
        </el-form-item>
        <el-form-item label="开播时间" prop="openTime">
          <el-date-picker
            v-model="editorForm.openTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="closeTime">
          <el-date-picker
            v-model="editorForm.closeTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="标签" prop="label">
          <el-select
            v-model="editorForm.label"
            @change="$forceUpdate();"
            multiple placeholder="请选择">
            <el-option
              v-for="item in tagOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="直播屏幕方向" prop="screenMode">
          <el-select
            v-model="editorForm.screenMode"
            @change="$forceUpdate();"
            placeholder="请选择">
            <el-option label="横屏" value="horizontal"></el-option>
            <el-option label="竖屏" value="vertical"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="直播方式" prop="type">
          <el-select
            v-model="editorForm.type"
            @change="$forceUpdate();"
            placeholder="请选择">
            <el-option label="APP直播" value="app"></el-option>
            <el-option label="推流直播" value="flow"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="简介" prop="content">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2}"
            placeholder="请输入内容"
            v-model.trim="editorForm.content">
          </el-input>
        </el-form-item>
        <el-form-item label="列表显示样式" prop="style">
           <el-select
             v-model="editorForm.style"
             @change="$forceUpdate();"
             placeholder="请选择">
             <el-option label="图文显示" value="image_text"></el-option>
             <el-option label="大图显示" value="image"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="直播封面" prop="cover">
<!--          @on-transport-file-list="handleTransportFileList"-->
          <upload
            @handleRemove="handleRemove"
            :file-list="editorForm.cover ? [`${editorForm.cover}`] : []"
            @handleSuccess="handleSuccess"
            :max-size="5120"
            :limit="1"
            v-if="isFinished"
            :key="editorForm.cover"
          >
          </upload>
          <div class="text">建议尺寸：750*300</div>
        </el-form-item>
        <el-form-item label="主播" prop="anchor">
          <el-select
            v-model="editorForm.anchor.id"
            @change="$forceUpdate();"
            placeholder="请选择">
            <el-option
              v-for="item in hostOptions"
              :key="item.id"
              :label="item.realname"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">提交审核</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Upload from '@/framework/components/upload'
import {find as findLabel} from '@/project/service/label'
import {find as findHost} from '@/project/service/anchor'
import {save,update,getDetails} from '@/project/service/live'

export default {
  name:'editor',
  props: {
    isEditor:{
      type: Boolean,
      default: () => {
        return false
      }
    },
    idList:{
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    const photoValidator = (rule, value, callback) => {
      if (!this.photoValidate) {
        callback(new Error('请上传直播封面'))
      } else {
        callback()
      }
    }
    return {
      id:'',
      //表单校验规则
      ruleValidate: {
        title: [{required: true, message: '不能为空', trigger: 'blur'}],
        openTime: [{required: true, message: '不能为空', trigger: 'blur'}],
        closeTime: [{required: true, message: '不能为空', trigger: 'blur'}],
        screenMode: [{required: true, message: '不能为空', trigger: 'change'}],
        type: [{required: true, message: '不能为空', trigger: 'change'}],
        style: [{required: true, message: '不能为空', trigger: 'change'}],
        cover: [{ required: true, validator: photoValidator, trigger: 'blur'}],
        anchor: [{required: true, message: '不能为空', trigger: 'change'}],
      },
      //编辑对话框中的表单
      editorForm:{
        anchor:{}
      },
      tagOptions:[],//标签选择器选项
      hostOptions:[],//主播选择器选项
      photoValidate:false,//是否上传图片
      isFinished:false,
    }
  },
  components: { Upload },
  watch:{
    isEditor(val){
      if(val){
        //获取传过来的id
        this.id = this.idList[0] || ''
        if(this.id){ //编辑
          //获取直播间id对应数据
          getDetails({id:this.id},data => {
            console.log('data:')
            console.log(data)
            this.editorForm = data
            //处理标签列表
            let list = []
            data.labelList.forEach(item => {
              list.push(item.id.toString())
            })
            this.editorForm.label = list
            this.editorForm.anchor.id = this.editorForm.anchor.id.toString()
            this.photoValidate = true
          })
        }
        this.isFinished = true
      }
    },
  },
  created(){
    this.getLabelList()
    this.getHostList()
  },
  methods: {
    //获取标签列表
    getLabelList(){
      let param = {label:{}}
      findLabel(param,data => {
        data.forEach(item => {
          item.id = item.id.toString()
        })
        this.tagOptions = data
        // console.log(this.tagOptions)
      })
    },
    //获取主播列表
    getHostList(){
      let param = {anchor:{}}
      findHost(param,data => {
        data.forEach(item => {
          item.id = item.id.toString()
        })
        this.hostOptions = data
        console.log(this.hostOptions)
      })
    },
    //删除图片触发
    handleRemove(){
      this.photoValidate = false
    },
    //上传成功时触发
    handleSuccess(res){
      this.photoValidate = true
      this.editorForm.cover = res.Location
    },
    //提交审核
    submit(){
      this.$nextTick(() => {
        this.$refs['formValidate'].validate(valid => {
          if(valid){
            let param = {live:this.editorForm}
            //将表单获取到的标签数组转换成请求规定格式
            let list = []
            param.live.label = param.live.label || []
            param.live.label.forEach(item => {
              list.push({id:item})
            })
            param.live.labelList = list
            param.live.anchor = {id: param.live.anchor.id.toString()}
            delete param.live.label
            delete param.live.agent
            console.log(param)
            if(this.id){ //编辑
              //处理编辑的请求参数
              param.live.id = this.id
              delete param.live.enabled
              delete param.live.status
              delete param.live.booked

              console.log('编辑')
              console.log(param)

              update(param,data => {
                // console.log(data)
                this.$message.success('提交成功')
                this.cancel()
              })
            }else{ //申请
              console.log('申请')
              save(param,data => {
                // console.log(data)
                this.$message.success('提交成功')
                this.cancel('',true)
              })
            }
          }
        })
      })
    },
    //取消 pointerEvent为elementUI传递参数，不可修改，传入空字符跳过
    cancel(pointerEvent,isUpdate=false){
      this.$refs.formValidate.resetFields()
      this.editorForm.anchor = {}
      this.isFinished = false
      this.$emit('close',isUpdate);
    },
  },
}
</script>

<style lang="less" scoped>
.el-input{
  width: 220px !important;
}

.el-textarea{
  width: 220px !important;
}

.el-select{
  /deep/ .el-input{
    width: 220px !important;
  }
}

.text{
  color: #a8afae;
}
</style>
